% !Mode:: "TeX:UTF-8"

\chapter{项目设计文档}

\section{项目概述}
\subsection{项目背景}

随着生活节奏的加快，外卖服务已成为现代都市人日常生活中不可或缺的一部分。“饿了么“项目旨在打造一个集在线订餐、即时配送、商家入驻、
用户评价等功能于一体的综合性外卖服务平台，满足用户多样化、便捷化的饮食需求，同时为商家提供高效的线上销售渠道。
\subsection{项目目标}
\begin{itemize}
\item 提供丰富的餐饮选择，覆盖各类菜系与特色小吃。
\item  实现高效、准确的订单处理与配送服务。
\item 建立商家与用户之间的信任桥梁，通过评价体系提升服务质量。
\item 持续优化用户体验，提升用户粘性与平台活跃度。
\end{itemize}

\section{开发环境和开发工具}
前端部署环境：Vue 架构，且 Vue Cli 在 4.0.0 版本以上。

后端部署环境：分阶段更新到不同的架构，最终在 springBoot 上实现测试环境。

\subsection{前端开发环境与工具}
前端开发环境如下：
\begin{itemize}
  \item {操作系统}: Windows 
  \item {编辑器}: Hbuilder 
  \item {浏览器}: Gooogle Chrome 
  \item {版本控制}: Git
  
  \end{itemize}

  前端开发使用工具如下：
\begin{itemize}
  \item HTML、CSS、JavaScript 
  \item {前端框架}: Vue 3.2.13、VueCli 5.0.0 
  \item {包管理工具}: npm 9.8.1 
  \item {调试工具}: Chrome DevTools
  \end{itemize}
\subsection{后端开发环境与工具}

后端开发环境如下：
\begin{itemize}
  \item {maven 版本设置}: maven-3.6.2 
  \item {tomcat 版本设置}: tomcat-9.0.79 
  \item {文件编码配置}: utf-8 
  \item {开发工具的 jdk 配置}: jdk8 
  \item {数据库编码形式}: utf8mb4 
  \item {STS 版本设置}:  STS（SpringToolSuite4） 
  \item {IDEA 版本设置}: 2023.1.3 
  
  
  \end{itemize}

  后端开发使用工具如下：
\begin{itemize}
  \item STS / IDEA 
  \item mySQL Workbench 
  \item tomcat
  
  \end{itemize}

\section{数据库设计}
为保证后端能够完成已有功能的设计，在这里将需要的数据库表列举如下，
其中 VARCHAR 类型数据默认为 VARCHAR(50)：
\begin{itemize}

\item user:
\begin{itemize}
\item  userIdt(INT,AI,PK)：作为 user 的主键
\item  userId(VARCHAR)：用户的电话号码
\item  password(VARCHAR)：用户密码
\item  userName(VARCHAR)：用户姓名
\item  userSex(INT)：用户性别
\item  userImg(MEDIUMTEXT)：用户图片，可为空
\end{itemize}

\item orders:
\begin{itemize}
\item  orderId(INT,AI,PK)：订单编号
\item  userId(VARCHAR)：用户电话号码
\item  businessId(INT)：商家编号
\item  orderDate(VARCHAR)：订购日期
\item  orderTotal(DECIMAL)：订单总价
\item  daId(INT)：送货地址编号
\item  orderState(INT)：订单状态（0：未支付；1：已支付）
\item  userIdt(INT)：user 表主键
\end{itemize}

\item orderdetailet:
\begin{itemize}
\item  odId(INT,PK,AI)：订单明细编号
\item  orderId(INT)：所属订单编号
\item  foodId(INT)：食品编号
\item  quantity(INT)：食品数量
\end{itemize}

\item deliveryaddress:
\begin{itemize}
\item  daId(INT,PK,AI)：地址编号
\item  contactName(VARCHAR)：联系人姓名
\item  contactSex(INT)：联系人性别
\item  contactTel(VARCHAR)：联系人电话
\item  userId(VARCHAR)：送货地址
\item  address(VARCHAR)：所属用户编号
\end{itemize} 

\item cart:
\begin{itemize}
\item  cartId(INT,PK,AI)：购物车编号，作为主键
\item  foodId(INT): 食品编号
\item  businessId(INT)：所属商家编号
\item  userId(VARCHAR)：所属用户编号
\item  quantity(INT)：同一类型食品的购买数量
\end{itemize}

\item business:
\begin{itemize}
\item  businessId(INT,PK,AI): 商家编号
\item  businessName(VARCHAR): 商家名称
\item  businessAddress(VARCHAR): 商家地址
\item  businessExplain(VARCHAR): 商家介绍
\item  businessImg(MEDIUMTEXT): 商家图片（base64）
\item  orderTypeId(INT): 点餐分类
\item  starPrice(DECIMAL): 起送费
\item  deliveryPrice(DECIMAL): 配送费
\item  remarks(VARCHAR)：备注 
\end{itemize}
\end{itemize}

\section{接口设计}

\begin{enumerate}
 \item  BusinessController/listBusinessByOrderTypeId
  \begin{itemize}
    
   \item 	参数：orderTypeId
   \item 	参数数据类型：int
   \item 	返回值：business 数组
   \item 	返回值数据类型：object
   \item 	使用范围：商家列表页面、我的购物车页面
   \item 	功能：根据点餐分类编号查询所属商家信息
    
  \end{itemize}


  \item BusinessController/getBusinessById
  \begin{itemize}
  	
\item参数：businessId
\item参数数据类型：int
\item返回值：business 对象
\item返回值数据类型：object
\item使用范围：商家信息页面、我的订单页面
\item功能：根据商家编号查询商家信息

  \end{itemize}
 
\item BusinessController/listFoodByBusinessId
  \begin{itemize}
    \item	参数：orderTypeId
\item	参数数据类型：int
\item	返回值：food 数组
\item	返回值数据类型：object
\item	使用范围：商家信息页面、我的订单页面
\item	功能：根据商家编号查询所属食品信息

  \end{itemize}


\item CartController/listCart
  \begin{itemize}
    \item	参数：userId、businessId（可选）
\item	参数数据类型：int、int
\item	返回值：cart 数组（多对一：所属商家信息、所属食品信息）
\item	返回值数据类型：object
\item	使用范围：商家列表页面、商家信息页面、我的购物车页面
\item	功能：根据用户编号查询此用户所有购物车信息根据用户编号和商家编号，查询此用户购物车中某个商家的所有购物车信息

  \end{itemize}

  \item CartController/saveCart

  \begin{itemize}
    \item	参数：userId、businessId、foodId
\item	参数数据类型：int、int、int
\item	返回值：int（影响的行数）
\item	使用范围：商家信息页面
\item	功能：向购物车表中添加一条记录

  \end{itemize}

  \item CartController/updateCart

  \begin{itemize}
    \item 参数：userId、businessId、foodId、quantity 
    \item 参数数据类型：int、int、int、int 返回值：int（影响的行数）
\item	使用范围：商家信息页面
\item	功能：根据用户编号、商家编号、食品编号更新数量

  \end{itemize}

  \item	CartController/removeCart

  \begin{itemize}
    \item	参数：userId、businessId、foodId（可选）
\item	参数数据类型：int、int、int
\item	返回值：int（影响的行数）
\item	使用范围：商家信息页面
\item	功能：根据用户编号、商家编号、食品编号删除购物车表中的一条食品记录根据用户编号、商家编号删除购物车表中的多条条记录

  \end{itemize}

  \item DeliveryAddressController/getDeliveryAddressById
  
  \begin{itemize}
    \item	参数：daId
\item	参数数据类型：int
\item	返回值：deliveryAddress
\item	返回值数据类型：object
\item	使用范围：确认订单页面
\item	功能：根据送货地址编号查询送货地址

  \end{itemize}

  \item DeliveryAddressController/listDeliveryAddressByUserId

  \begin{itemize}
    \item	参数：userId
\item	参数数据类型：int
\item	返回值：deliveryAddress 数组
\item	返回值数据类型：object
\item	使用范围：我的地址页面
\item	功能：根据用户编号查询所属送货地址

  \end{itemize}

  \item DeliveryAddressController/getDeliveryAddressById

  \begin{itemize}
    \item	参数：daId
\item	参数数据类型：int
\item	返回值：deliveryAddress
\item	返回值数据类型：object
\item	使用范围：确认订单页面
\item	功能：根据送货地址编号查询送货地址

  \end{itemize}

  \item 	DeliveryAddressController/removeDeliveryAddress

  \begin{itemize}
    \item	参数：daId
\item	参数数据类型：int
\item	返回值：int（影响的行数）
\item	使用范围：我的地址页面
\item	功能：根据送货地址编号删除一条记录

  \end{itemize}

  \item DeliveryAddressController/updateDeliveryAddress

  \begin{itemize}
    \item	参数：daId、contactName、contactSex、contactTel、address、userId
\item	参数数据类型：int,string,int,int,string,int 
\item 返回值：int（影响的行数）
\item 使用范围：编辑地址页面
\item 功能：根据送货地址编号更新送货地址信息

  \end{itemize}

  \item	OrdersController/createOrders

  \begin{itemize}
    \item	参数：userId、businessId、daId、orderTotal
\item	参数数据类型：int,int,int,double
\item	返回值：int（订单编号）
\item	使用范围：确认订单页面
\item	功能：根据用户编号、商家编号、订单总金额、送货地址编号
向订单表中添加一条记录，并获取自动生成的订单编号，然后根据用户编号、商家编号从购物车表中查询所有数据，批量添加到订单明细表中，然后根据用户编号、商家编号删除购物车表中的数据。

  \end{itemize}

  \item 	OrdersController/listOrdersByUserId

  \begin{itemize}
    \item	参数：userId
\item	参数数据类型：int
\item	返回值：orders 数组（包括多对一：商家信息；一对多：订单明细信息）
\item	返回值数据类型：object
\item	使用范围：历史订单页面
\item	功能：根据用户编号查询此用户的所有订单信息

  \end{itemize}

  \item OrdersController/getOrdersById

  \begin{itemize}
    \item	参数：orderId
\item	参数数据类型：int
\item	返回值：orders 对象（包括多对一：商家信息；一对多：订单明细信息）
\item	返回值数据类型：object
\item	使用范围：历史订单页面
\item	功能：根据订单编号查询订单信息，包括所属商家信息，和此订单的所有订单明细信息

  \end{itemize}

  \item 	UserController/getUserByIdByPass

  \begin{itemize}
    \item 参数：userId、password
    \item 参数数据类型：int，string 
    \item 返回值：user 对象
    \item 返回值数据类型：object
\item	使用范围：我的页面、用户管理页面
\item	功能：根据用户编号与密码查询用户信息

  \end{itemize}

  \item 	UserController/getUserById

  \begin{itemize}
   
\item	参数：userId
\item	参数数据类型：int
\item	返回值：int（返回行数）
\item	使用范围：登录页面
\item	功能：根据用户编号查询用户表返回的行数

  \end{itemize}

  \item 	UserController/updateUse

  \begin{itemize}
    \item	参数：userId，password、userName、userSex，userImg
\item	参数数据类型：int、string, string, int，string
\item	返回值：user 对象
\item	返回值数据类型：object
\item	使用范围：用户管理页面
\item	功能：修改用户参数信息，返回用户对象

  \end{itemize}

  \item 	UserController/saveUser

  \begin{itemize}
    \item	参数：userId、password、userName、userSex
\item	参数数据类型：int、string, string, int
\item	返回值：int（影响的行数）
\item	使用范围：注册页面
\item	功能：向用户表中添加一条记录

  \end{itemize}

  \item		OrdersController/finishOrders

  \begin{itemize}
    \item	参数：orderId
\item	参数数据类型：int
\item	返回值：int（影响的行数）
\item	使用范围：在线支付页面
\item	功能：将该订单状态设置为已支付，同时返回订单状态

  \end{itemize}

  \item 	BusinessController/listBusiness

  \begin{itemize}
    \item	参数：无
\item	返回值：business 数组
\item	返回值数据类型：object
\item	使用范围：首页
\item	功能：查询所有商家信息

  \end{itemize}

\end{enumerate}

\section{前端基本设计描述}

前端所用的框架是 vue3 的框架，将 html、css、js 使用不同的标签合并到一个.vue 文件中。
并且前端实现着与用户进行交互，与后端进行接口的连接的功能。

\subsection{页面样式设计}
此部分将展示基础的几个页面并且展示页面设计的基本思路和实现细节。

在页面样式设计方面，将采用以下策略和原则来让用户拥有良好的体验：

响应式设计：使用 display: flex 属性确保程序在不同设备上页面不会变形
采用一致的布局：尽量使用共通的组件和格式，并沿用原有页面的颜色等样式。

直观的导航：提供清晰的底部导航菜单和利用 fontawesome 图标设置跳转链接，使用户能够快速找到所需的功能和信息。
并且，为了让用户收获及时的反馈，我们会重点关系这两个方面，即时反馈和错误处理。

即时反馈：在用户完成操作后，及时提供反馈信息，确认操作是否成功或失败，如及时跳转，或者支付成功会有弹窗显示“支付成功”。

错误处理：如果用户输入错误或发生问题，提供明确的错误提示和解决方案，如，输入密码位数不符合密码格式要求，会有弹窗进行提示，用户注册和登陆时输入手机号不符合中国大陆手机号格式也会出现弹窗提示，帮助用户得到及时的交互。

\subsection{实现功能}

\begin{itemize}
  \item 	Goods、Ratings、Seller 组件视图均可上下滚动
  \item	商品页 点击左侧menu，右侧list对应跳转到相应位置
  \item	点击list查看商品详情页，父子组件的通信
  \item	购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间为兄弟组件通信，点击购物车图标，展示已选择的商品列表
  \item	商家实景图片可以左右滑动
  \item	loaclStorage 缓存商家信息（id、name）
  
\end{itemize}

\subsection{实现功能}

│  .gitignore

│  babel.config.js

│  package-lock.json

│  package.json

│  README.md

│  vue.config.js

│

├─public

│      favicon.ico

│      index.html

│

└─src

    │  App.vue

    │  common.js

    │  main.js

    │

    ├─assets

    ├─components

    │      Footer.vue

    │

    ├─router

    │      index.js

    │

    └─views

            AddUserAddress.vue

            BusinessInfo.vue

            BusinessList.vue

            BusinessList2.vue

            BusinessSearch.vue

            ChangePwd.vue

            EditUserAddress.vue

            Index.vue

            Login.vue

            Login2.vue

            Login3.vue

            My.vue

            Mybusiness.vue

            Mybusinessinfo.vue

            MyImg.vue

            MyWallet.vue

            OpenPage.vue

            OrderList.vue

            OrderList2.vue

            Orders.vue

            Payment.vue

            Register.vue

            Register2.vue

            Success.vue

            UserAddress.vue
            

\section{后端基本设计描述}

	后端设计基于Spring Boot基础框架，采用微服务架构，将系统拆分为多个独立的服务模块（如用户服务、订单服务、商家服务、等），完成点餐业务流以及商家管理业务流。
使用MySQL作为主数据库，存储用户信息、商家信息、菜品信息、订单数据等。

在点餐业务流中，后端需要完成相关接口的设计，保证用户完成以下功能：
\begin{itemize}
  \item	用户管理：实现基本登录注册功能，同时提供修改用户信息，退出登录功能
\item	商家选择：在首页能够通过类别搜索特定商家列表，点击商家跳转到该商家详情，返回商家所有菜品信息
\item	点餐系统：选择商品后会将其加入购物车中，实现单击购物车展开功能，结算订单时会生成未支付订单，选择支付则会到支付页面进行支付
\item	支付系统：跳转到支付页面后,完成支付操作，跳转到支付成功信息页面，生成已支付订单和历史订单，钱包数值实时更新。
\end{itemize}

在商家业务流中，后端需要完成相关接口的设计，保证用户完成以下功能：
\begin{itemize}
  \item	商家登记：实现对商家进行登记，完成基本的商家登录及注册功能。
  \item	商品管理：实现商家登陆后首页对相关商品单价及数量进行管理的功能。
  \item	订单管理：实现商家登陆后可查看订单交易的明细情况。
  
\end{itemize}

\section{项目安全设计}
\subsection{数据加密与隐私保护}

由于项目中存在用户手机号、登陆密码等隐私信息，项目在md5加密的基础上对密码添加随机盐值的加密方式，在数据库user表添加一个用于存储随机盐值的属性“salt“，
添加MD5Util接口对用户敏感信息进行加密存储与传输。

\subsection{访问控制与权限管理}
增加对用户的验证，严格定义不同角色的权限范围，防止出现某商家删除其他商家食品的现象或用户修改他人地址或订单等越权操作。
